<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理员界面</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="main-container">
        <div class="sidebar">
            <div class="logo">
                <h2>港口管理系统</h2>
            </div>
            <nav>
                <ul>
                    <li>
                        <a href="main.html">
                            <span class="icon">📊</span>
                            <span class="title">仪表板</span>
                        </a>
                    </li>
                    <li>
                        <a href="#containers">
                            <span class="icon">📦</span>
                            <span class="title">集装箱管理</span>
                        </a>
                    </li>
                    <li>
                        <a href="#ships">
                            <span class="icon">🚢</span>
                            <span class="title">船舶管理</span>
                        </a>
                    </li>
                    <li>
                        <a href="#cargo">
                            <span class="icon">📝</span>
                            <span class="title">货物管理</span>
                        </a>
                    </li>
                    <li>
                        <a href="#reports">
                            <span class="icon">📈</span>
                            <span class="title">报表统计</span>
                        </a>
                    </li>
                    <li>
                        <a href="#admin" class="active">
                            <span class="icon">👥</span>
                            <span class="title">管理员</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" id="logoutLink">
                            <span class="icon">🚪</span>
                            <span class="title">登出</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
        <div class="main-content">
            <div class="search-box">
                <input type="text" id="searchUser" placeholder="用户名...">
                <button id="searchButton">查询</button>
                <button id="addButton">新增</button>
            </div>
            <div class="data-table">
                <table>
                    <thead>
                        <tr>
                            <th>序号</th>
                            <th>用户名</th>
                            <th>性别</th>
                            <th>电话</th>
                            <th>单位名称</th>
                            <th>是否为管理员</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="userTableBody">
                        <!-- 数据将通过JavaScript动态加载 -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- 用户模态框 -->
    <div id="userModal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <h2 id="modalTitle">新增用户</h2>
            <form id="userForm">
                <input type="hidden" id="userId">
                <div class="input-group">
                    <label for="username">用户名:</label>
                    <input type="text" id="username" required>
                </div>
                <div class="input-group">
                    <label for="password">密码:</label>
                    <input type="password" id="password" required>
                </div>
                <div class="input-group">
                    <label for="gender">性别:</label>
                    <select id="gender" required>
                        <option value="男">男</option>
                        <option value="女">女</option>
                    </select>
                </div>
                <div class="input-group">
                    <label for="phone">电话:</label>
                    <input type="text" id="phone" required>
                </div>
                <div class="input-group">
                    <label for="unit_name">单位名称:</label>
                    <input type="text" id="unit_name" required>
                </div>
                <div class="input-group">
                    <label for="manager_id">是否为管理员:</label>
                    <select id="manager_id" required>
                        <option value="0">否</option>
                        <option value="1">是</option>
                    </select>
                </div>
                <div class="input-group">
                    <button type="submit">保存</button>
                    <button type="button" id="cancelBtn">取消</button>
                </div>
            </form>
        </div>
    </div>

    <script src="js/admin.js"></script>
</body>
</html>